<template>
  <div style="height: 100%; width: 100%">
    <div class="home" v-if="!data.loading">
      <!-- First View Component -->
      <div class="firstview">
        <div class="swiper swiper-no-swiping" id="swiper1">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img :src="data.firstData.cover" data-swiper-parallax-scale="1.1" />
            </div>
          </div>
        </div>
        <div class="ftest">
          <div id="typing-demo">
            <p align="center"></p>
            <p align="center"></p>
          </div>
        </div>
      </div>

      <!-- View2 Component -->
      <div class="sview">
        <div class="left" id="left">
          <div class="bg"></div>
          <div class="content">
            <span style="color:white" v-html="data.all.homeList[3].title"></span>&nbsp;&nbsp;
            <span class="iconfont" style="color:#eee;cursor: pointer;text-decoration: underline;" @click="goo(data.all.homeList[3].description)" v-html="data.all.homeList[3].description">
            </span>
          </div>
        </div>
        <div class="right">
          <div class="swiper" id="swiper2">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(item, index) in data.memberInfo"
                :key="index + 'a'"
              >
                <span data-swiper-parallax="-300" style="text-align: center">
                  {{ item.description }}
                </span>
                <span>{{ item.name }}</span>
                <img :src="item.avatar" data-swiper-parallax="300" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- View3 Component -->
      <div class="swiper" id="swiper3">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="first">
              <div class="one">
                <div class="box" data-swiper-parallax-x="-100">
                  <div class="cover-text">
                    {{ data.all.homeList && data.all.homeList[data.currentIndex] ? data.all.homeList[data.currentIndex].desc : '' }}
                  </div>
                  <div class="band wband">
                    <span>{{ data.all.homeList && data.all.homeList[data.currentIndex] ? data.all.homeList[data.currentIndex].title : '' }}</span>
                  </div>
                </div>
              </div>
              <div class="two">
                <Transition name="fade-slide" mode="out-in">
                  <img
                    :src="data.all.homeList && data.all.homeList[data.currentIndex] ? data.all.homeList[data.currentIndex].cover : ''"
                    alt=""
                    class="carousel-image"
                    :key="data.currentIndex"
                  />
                </Transition>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <myloading v-else></myloading>
  </div>
</template>

<script setup>
import { reactive, onBeforeMount, onMounted, onUnmounted, inject, nextTick } from 'vue'
import Swiper from 'swiper/bundle'
import { TweenMax } from 'gsap'
import axios from '@/utils/Axios'
import base from '@/api/base'
import Myloading from '@/components/other/myloading.vue'

let flag = inject('isPhone')

let data = reactive({
  all: {},
  firstData: {},
  loading: true,
  memberInfo: [],
  currentIndex: 1, // 当前显示的homeList索引，从1开始
})

const goo = function(ref){
  window.open(ref)
}

// 轮播切换函数
const switchContent = () => {
  // 跳过homeList[0]，从索引1开始轮播到数组末尾
  if (data.all.homeList && data.all.homeList.length > 1) {
    const maxIndex = data.all.homeList.length - 1
    data.currentIndex = data.currentIndex >= maxIndex ? 1 : data.currentIndex + 1
  }
}

// 启动轮播定时器
let carouselTimer = null
const startCarousel = () => {
  carouselTimer = setInterval(switchContent, 4000) // 每4秒切换一次
}

const stopCarousel = () => {
  if (carouselTimer) {
    clearInterval(carouselTimer)
    carouselTimer = null
  }
}

function fontDeno(s, s2) {
  let divTyping = document.getElementById('typing-demo')
  let str = []
  str.push(s)
  str.push(s2)
  new Promise(resolve => {
    let i = 0,
      timer = 0

    function typing() {
      console.log('typing',str)
      if (i <= str[0]) {
        divTyping.children[0].innerText = str[0].slice(0, i++) + '_'
        timer = setTimeout(typing, 200)
      } else {
        divTyping.children[0].innerText = str[0] //结束打字,移除 _ 光标
        clearTimeout(timer)
        resolve()
      }
    }

    typing()
  }).then(() => {
    let i = 0,
      timer = 0

    function typing() {
      if (i <= str[1].length) {
        divTyping.children[1].innerText = str[1].slice(0, i++) + '_'
        timer = setTimeout(typing, 200)
      } else {
        divTyping.children[1].innerText = str[1] //结束打字,移除 _ 光标
        clearTimeout(timer)
      }
    }
    typing()
  })
}

onBeforeMount(() => {
  axios.get(base.getHomeInfo).then(myData => {
    console.log("mydata",myData)
    data.firstData = myData.homeList[0]
    data.all = myData
    data.loading = false
  })

  axios.get(base.getMemberInfo).then(res => {
    data.memberInfo = res.memberList.map(item => {
      return {
        avatar: item.avatar,
        description: item.description,
        name: item.user.name,
      }
    })
    
    // Initialize swiper2 after memberInfo data is loaded
    nextTick(() => {
      var mySwiper2 = new Swiper('#swiper2', {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        grabCursor: true,
        direction: 'vertical',
        observer: true,
        observeParents: true,
        parallax: true,
        effect: 'fade',
        fadeEffect: {
          crossFade: true,
        },
      })
    })
  })
})

onMounted(() => {
  // Initialize swiper1 (first view)
  let mySwiper1 = new Swiper('#swiper1', {
    speed: 3000,
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
    observer: true,
    observeParents: true,
    effect: 'fade',
    fadeEffect: {
      crossFade: true,
    },
    parallax: true,
  })
  
  // Initialize typing effect
  setTimeout(() => {
    if (data.firstData.desc && data.firstData.title) {
      fontDeno(data.firstData.desc, data.firstData.title)
    }
  }, 100)

  // swiper2 will be initialized after memberInfo data is loaded
  TweenMax.from('#left', 1, { x: -100, opacity: 0, scale: 1.4 })

  // Initialize swiper3 (view3)
  let mySwiper3 = new Swiper('#swiper3', {
    speed: 1000,
    direction: 'vertical',
    observer: true,
    observeParents: true,
    enabled: false,
    parallax: true,
    effect: 'fade',
    fadeEffect: {
      crossFade: true,
    },
    mousewheel: {
      releaseOnEdges: true,
    },
    touchReleaseOnEdges: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  })
  
  const app = document.getElementById('app')
  window.onscroll = function () {
    let windowHeight = app.clientHeight
    let scrollHeight = app.scrollHeight
    let my =
      document.documentElement.scrollTop ||
      document.body.scrollTop ||
      window.pageYOffset
    if (my + windowHeight >= scrollHeight) {
      mySwiper3.enable()
    } else {
      mySwiper3.disable()
    }
  }
  
  // 启动轮播
  startCarousel()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  stopCarousel()
})
</script>

<style scoped lang="less">
@import '//at.alicdn.com/t/font_3173448_r9k3cqhcujj.css';

/* First View Styles */
@media screen and(min-width: 200px) and (max-width: 768px) {
  .firstview {
    .ftest {
      #typing-demo {
        font-size: 24px;
      }
    }
  }
}

.firstview {
  position: relative;
  height: 81vh;

  .ftest {
    color: white;
    position: absolute;
    top: 50%;
    z-index: 2;
    right: 10px;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 34px;
    letter-spacing: 5px;
    line-height: 50px;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #000000;
    opacity: 0.1;
    z-index: 2;
  }
}

#swiper1 {
  height: 81vh;

  .swiper-slide {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}

/* View2 Styles */
#swiper2 {
  height: 100%;
  width: 50vw;
}
#left {
  height: 100%;
  width: 50vw;
}
@media screen and(min-width: 200px) and (max-width: 768px) {
  .sview {
    flex-direction: column-reverse;
    width: 100%;
    padding-top: 5px;
    .right {
      width: 100%;
      height: 50%;
      #swiper2 {
        width: 100vw;
        .swiper-slide {
          span {
            font-size: 16px;
          }
        }
      }
    }
    #left {
      box-sizing: border-box;
      width: 100vw;
      margin-top: 10px;
      padding: 0 15px;
    }
  }
}
@media screen and(min-width: 200px) and (max-width: 768px) {
  .bg{
    width: 100vw !important;
    height: 5vh !important;
  }
}
.sview {
  height: 12vh;
  display: flex;
  .content{
    position:absolute;
    text-align: center;
  }
  .bg{
    background-image: url('../assets/img/computer.jpg');
    background-size: cover;
    background-position: center;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    width: 50vw;
    height: 200px;
    filter: blur(10px);
  }
  .left {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .right {
    .swiper-slide {
      font-weight: bold;
      font-size: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
      }
      span:first-child {
        width: 60%;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        text-indent: 2em;
      }
    }
  }
}
#apple,
#twitter,
#github,
#facebook {
  font-size: 32px;
  color: #fff;
  border-radius: 50%;
  margin: 0 40px;
  transition: all 0.3s;
}
#apple:hover,
#twitter:hover,
#github:hover,
#facebook:hover {
  text-shadow: 0 0 25px #0072ff, 0 0 50px #0072ff, 0 0 75px #0072ff,
    0 0 100px #0072ff;
  transform: translateY(-6px) scale(1.2);
  cursor: pointer;
}

/* View3 Styles */
#swiper3 {
  height: 100vh;
  ::v-deep .swiper-pagination {
    right: 20px;
    span {
      margin: 10px;
    }
  }
}
.first {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  @media (max-width: 1000px) {
    grid-template-rows: 1fr 1fr;
  }
  .two {
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    
    .carousel-image {
      transition: all 0.8s ease-in-out;
      transform: scale(1.05);
    }
    
    .fade-slide-enter-active,
    .fade-slide-leave-active {
      transition: all 0.8s ease-in-out;
    }
    
    .fade-slide-enter-from {
      opacity: 0;
      transform: scale(1.1) translateX(30px);
    }
    
    .fade-slide-leave-to {
      opacity: 0;
      transform: scale(0.95) translateX(-30px);
    }
  }
  .one {
    height: 100%;
    width: 100%;
    @media (max-width: 800px) {
      width: 100vw;
    }
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    .box {
      position: relative;
      background: #fff;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    }
    .cover-text {
      text-indent: 2em;
      padding: 60px;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      @media (max-width: 800px) {
        font-size: 16px;
      }
      color: #000000;
    }

    .band span {
      background: #3699d5;
      color: #fff;
      width: 225px;
      font-size: 24px;
      font-weight: bold;
      padding: 8px 0;
      position: absolute;
      transform: rotate(45deg);
      left: -25px;
      top: 30px;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      text-align: center;
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    }

    .band {
      position: absolute;
      width: 150px;
      height: 150px;
      overflow: hidden;
      top: -10px;
      right: -10px;
    }
    .band::before,
    .band::after {
      border: 5px solid #2880b8;
      content: '';
      position: absolute;
      border-top-color: transparent;
      border-right-color: transparent;
    }
    .band::after {
      bottom: 0;
      right: 0;
    }
  }
}
.title {
  width: 100%;
  height: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  span:first-child {
    color: #1890ff;
    font-size: 40px;
    margin-bottom: 10px;
  }
  span {
    color: #bbb;
  }
}
.three {
  height: 100%;
  width: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.home-fullpageThree {
  width: 100%;
  height: 100%;
  background-color: #fff;

  &-header {
    width: 100%;
    height: 20%;
    @media (max-width: 1000px) {
      height: 10%;
    }
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    span:first-child {
      color: #1890ff;
      font-size: 40px;
      margin-bottom: 10px;
    }

    span:last-child {
      color: #bbb;
    }
  }

  &-body {
    width: 100%;
    height: 85%;
    display: flex;
    justify-content: center;
    @media (max-width: 1000px) {
      flex-direction: column;
    }

    &-front {
      width: 45%;
      @media (max-width: 1000px) {
        width: 100%;
        height: 50%;
      }
      height: 75%;
      display: flex;
      align-items: center;
      margin-right: 20px;
      overflow: hidden;
      border-radius: 5px;
      box-shadow: 0 0 5px #bbb;
      &-img {
        object-fit: cover;
        object-position: center;
        width: 55%;
        height: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 1s;

        &:hover {
          transform: scale(1.1);
        }

        img {
          height: 100%;
        }
      }

      &-context {
        flex: 1;
        height: 75%;
        padding: 30px;
        @media (max-width: 1000px) {
          padding: 0 0 0 30px;
        }

        &-title {
          width: 100%;
          color: #333;
          font-size: 30px;
          @media (max-width: 1000px) {
            font-size: 22px;
          }
        }

        &-desc {
          width: 100%;
          font-size: 15px;
          margin-top: 20px;
          color: #333;
          line-height: 1.8;
        }
      }
    }

    &-back {
      width: 45%;
      @media (max-width: 1000px) {
        width: 100%;
        height: 55%;
      }
      height: 75%;
      overflow: hidden;
      border-radius: 5px;
      box-shadow: 0 0 5px #bbb;
      &-img {
        width: 100%;
        height: 60%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 1s;
        object-fit: cover;
        object-position: center;
        &:hover {
          transform: scale(1.1);
        }

        img {
          width: 100%;
        }
      }

      &-context {
        flex: 1;
        height: 40%;
        padding: 30px;
        @media (max-width: 1000px) {
          padding: 0;
        }
        &-title {
          width: 100%;
          text-align: center;
          font-size: 30px;
          @media (max-width: 1000px) {
            font-size: 22px;
          }
          color: #333;
        }

        &-desc {
          margin-top: 20px;
          font-size: 15px;
          color: #333;
          line-height: 1.8;
        }
      }
    }
  }
}
</style>
